import { TiptapCollabProvider } from '@hocuspocus/provider';
import { useEffect } from 'react';
import * as Y from 'yjs';
import { CollaborationServerProvider } from './utils/provider';
import { Awareness } from 'y-protocols/awareness';
import Tiptap from './Tiptap';
import React from 'react';

const appId = '7j9y6m10';
const room = `room.${new Date()
  .getFullYear()
  .toString()
  .slice(-2)}${new Date().getMonth() + 1}${new Date().getDate()}-ok`;

const ydoc = new Y.Doc();
const provider = new TiptapCollabProvider({
  appId,
  name: room,
  document: ydoc,
});

const CXF: React.FC = () => {
  useEffect(() => {
    const doc = new Y.Doc();
    const awarenessInstance = new Awareness(doc);
    
    const collaborationProvider = new CollaborationServerProvider(
      'test-doc',
      doc,
      awarenessInstance,
      'your-token',
      {
        id: '1',
        name: 'Test User'
      }
    );

    return () => {
      collaborationProvider.cleanup();
    };
  }, []);

  return (
    <div className="col-group">
      <Tiptap provider={provider} ydoc={ydoc} room={room} />
    </div>
  );
};

export default CXF;